<template>
  <div>
    一，OSM街道图 （匹配4326）
    <div id="map" style="width: 1000px; height: 1000px"></div>

    二，谷歌影像图
    <div id="map2" style="width: 1000px; height: 1000px"></div>

  </div>
</template>

<script>
import 'ol/ol.css'
import {Map, View} from 'ol'
import TileLayer from "ol/layer/Tile";
import OSM from "ol/source/OSM";
import XYZ from 'ol/source/XYZ';

export default {
  name: "olmap",
  mounted() {
    new Map({
      target: 'map',
      layers: [
        new TileLayer({
          source: new OSM()
        })
      ],
      view: new View({
        projection: 'EPSG:4326',//使用这个坐标系
        center:[104.704968,31.540962],//西南科技大学
        zoom: 15
      })
    });
    new Map({
      target: 'map',
      layers: [
        new TileLayer({
          source: new XYZ({
            url:"http://t3.tianditu.com/DataServer?T=img_w&tk=5a257cd2df1b3311723bd77b0de14baf&x={x}&y={y}&l={z}"
          })
        })
      ]
    })
  }
}
</script>

<style scoped>

</style>